<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的错题 - 英语练习系统</title>
    <link rel="stylesheet" type="text/css" href="/css/wrong_questions.css">
    <script src="/js/wrong-questions.js"></script>
</head>
<body>
<input type="hidden" id="userId" th:value="${session.user.id}">
<input type="hidden" id="username" th:value="${session.user.username}">
<nav class="navbar">
    <div class="logo">英语练习系统</div>
    <div class="nav-links">
        <span th:text="'欢迎您，' + ${session.user.username} + '同学！'"></span>
        <a href="practise">返回练习</a>
        <a href="login">退出登录</a>
    </div>
</nav>

<!-- 左侧导航栏 -->
<div class="sidebar">
    <div class="sidebar-header">
        <h3>错题分类</h3>
    </div>

    <!-- 分类导航 -->
    <div class="nav-item nav-category active" onclick="filterWrongQuestions('all')">
        <div>
            <h3>全部错题</h3>
            <p>查看所有错题记录</p>
        </div>
    </div>
    <div class="nav-item nav-category" onclick="filterWrongQuestions('CET4')">
        <div>
            <h3>CET4</h3>
            <p>四级错题</p>
        </div>
    </div>
    <div class="nav-item nav-category" onclick="filterWrongQuestions('CET6')">
        <div>
            <h3>CET6</h3>
            <p>六级错题</p>
        </div>
    </div>
    <div class="nav-item nav-category" onclick="filterWrongQuestions('PE')">
        <div>
            <h3>PE</h3>
            <p>考研英语错题</p>
        </div>
    </div>
</div>

<!-- 主内容区 -->
<div class="main-content">
    <div class="question-container">
        <h2 class="section-title">我的错题本</h2>

        <div class="question-types">
            <button class="type-btn active" onclick="filterByType('all')">全部</button>
            <button class="type-btn" onclick="filterByType('reading')">阅读</button>
            <button class="type-btn" onclick="filterByType('writing')">写作</button>
            <button class="type-btn" onclick="filterByType('translation')">翻译</button>
        </div>

        <div id="wrong-questions-list" class="wrong-question-list">
            <!-- 这里会动态加载错题列表 -->
            <div class="empty-state">
                <div class="empty-state-icon">📚</div>
                <h3>暂无错题记录</h3>
                <p>开始练习后，错题会自动记录在这里</p>
            </div>
        </div>
    </div>

    <!-- 练习页面 (初始隐藏) -->
    <div id="practice-screen" class="question-container" style="display: none;">
        <h2 class="section-title" id="current-practice-title">正在练习</h2>
        <div id="practice-content">
            <!-- 这里会动态生成练习内容 -->
            <div class="loader"></div>
        </div>
        <button class="submit-btn" onclick="checkAnswer()">提交答案</button>
    </div>
</div>


</body>
</html>